<template>
  <div style="font-size: 18px; position: relative">
    <span
      style="
        position: absolute;
        left: 0px;
        top: -20px;
        font-weight: bolder;
        font-family: 'sans-serif';
      "
      >未来1年游客流量趋势图</span
    >
    <!-- 盒子将来echarts展示图形图标的节点 -->
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
onMounted(() => {
  initmap()
})
//获取节点
let charts = ref()
const initmap = () => {
  //获取echarts类的实例
  let mycharts = echarts.init(charts.value)
  mycharts.setOption({
    //标题组件
    // title: {
    //     text: '未来1年游客流量趋势图',
    //     textStyle:{
    //         // fontSize:15,
    //         color :'#eee'
    //     }
    // },
    grid: {
      left: 30,
      top: 0,
      right: 30,
      bottom: 30
    },
    //x|y轴
    xAxis: {
      type: 'category',
      boundaryGap: false,

      data: [
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月',
        '1月',
        '2月'
      ]
    },
    yAxis: {
      show: false,
      splitLine: {
        show: false
      }
      // //轴线的设置
      // axisLine: {
      //     show: false
      // },
      // //刻度
      // axisTick: {
      //     show: false
      // }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    //系列
    series: [
      {
        type: 'line',
        data: [140, 232, 101, 264, 90, 340, 250, 140, 232, 101, 264, 90, 340],
        //平滑曲线的设置
        smooth: true,
        //区域填充样式
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#2b90d9' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#d9e1e8' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      }
    ]
  })
}
</script>

<style scoped>
.charts {
  width: 100%;
  height: 100px;
}
</style>
